<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont Demo</title>
    <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico"
          type="image/x-icon"/>
    <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
    <script src="iconfont.js"></script>
    <!-- jQuery -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
    <!-- 代码高亮 -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
        <ul id="tabs" class="dib-box">
            <li class="dib active"><span>Unicode</span></li>
            <li class="dib"><span>Font class</span></li>
            <li class="dib"><span>Symbol</span></li>
        </ul>

    </div>
    <div class="tab-container">
        <div class="content unicode" style="display: block;">
            <ul class="icon_lists dib-box">

                <li class="dib">
                    <span class="icon iconfont">&#xe8ab;</span>
                    <div class="name">爱心</div>
                    <div class="code-name">&amp;#xe8ab;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ac;</span>
                    <div class="name">编辑</div>
                    <div class="code-name">&amp;#xe8ac;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ad;</span>
                    <div class="name">3D眼镜</div>
                    <div class="code-name">&amp;#xe8ad;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ae;</span>
                    <div class="name">彩蛋</div>
                    <div class="code-name">&amp;#xe8ae;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8af;</span>
                    <div class="name">安全</div>
                    <div class="code-name">&amp;#xe8af;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8b0;</span>
                    <div class="name">帮助</div>
                    <div class="code-name">&amp;#xe8b0;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8b1;</span>
                    <div class="name">不感兴趣</div>
                    <div class="code-name">&amp;#xe8b1;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8b2;</span>
                    <div class="name">播放记录</div>
                    <div class="code-name">&amp;#xe8b2;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8b3;</span>
                    <div class="name">创作</div>
                    <div class="code-name">&amp;#xe8b3;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8b4;</span>
                    <div class="name">成功</div>
                    <div class="code-name">&amp;#xe8b4;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8b5;</span>
                    <div class="name">测试</div>
                    <div class="code-name">&amp;#xe8b5;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8b6;</span>
                    <div class="name">电话</div>
                    <div class="code-name">&amp;#xe8b6;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8b7;</span>
                    <div class="name">点赞</div>
                    <div class="code-name">&amp;#xe8b7;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8b8;</span>
                    <div class="name">定位</div>
                    <div class="code-name">&amp;#xe8b8;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8b9;</span>
                    <div class="name">电筒_关</div>
                    <div class="code-name">&amp;#xe8b9;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ba;</span>
                    <div class="name">电影</div>
                    <div class="code-name">&amp;#xe8ba;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8bb;</span>
                    <div class="name">地图</div>
                    <div class="code-name">&amp;#xe8bb;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8bc;</span>
                    <div class="name">电筒_开</div>
                    <div class="code-name">&amp;#xe8bc;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8bd;</span>
                    <div class="name">电影票</div>
                    <div class="code-name">&amp;#xe8bd;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8be;</span>
                    <div class="name">订单</div>
                    <div class="code-name">&amp;#xe8be;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8bf;</span>
                    <div class="name">更多</div>
                    <div class="code-name">&amp;#xe8bf;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8c0;</span>
                    <div class="name">翻倍</div>
                    <div class="code-name">&amp;#xe8c0;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8c1;</span>
                    <div class="name">发现</div>
                    <div class="code-name">&amp;#xe8c1;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8c2;</span>
                    <div class="name">儿童票</div>
                    <div class="code-name">&amp;#xe8c2;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8c3;</span>
                    <div class="name">公益</div>
                    <div class="code-name">&amp;#xe8c3;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8c4;</span>
                    <div class="name">红包</div>
                    <div class="code-name">&amp;#xe8c4;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8c5;</span>
                    <div class="name">复制</div>
                    <div class="code-name">&amp;#xe8c5;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8c6;</span>
                    <div class="name">分享</div>
                    <div class="code-name">&amp;#xe8c6;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8c7;</span>
                    <div class="name">话题符号</div>
                    <div class="code-name">&amp;#xe8c7;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8c8;</span>
                    <div class="name">会员</div>
                    <div class="code-name">&amp;#xe8c8;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8c9;</span>
                    <div class="name">阿里鱼</div>
                    <div class="code-name">&amp;#xe8c9;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ca;</span>
                    <div class="name">机具</div>
                    <div class="code-name">&amp;#xe8ca;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8cb;</span>
                    <div class="name">减少</div>
                    <div class="code-name">&amp;#xe8cb;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8cc;</span>
                    <div class="name">卡包</div>
                    <div class="code-name">&amp;#xe8cc;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8cd;</span>
                    <div class="name">话题</div>
                    <div class="code-name">&amp;#xe8cd;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ce;</span>
                    <div class="name">关注</div>
                    <div class="code-name">&amp;#xe8ce;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8cf;</span>
                    <div class="name">买一赠一</div>
                    <div class="code-name">&amp;#xe8cf;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8d0;</span>
                    <div class="name">密码</div>
                    <div class="code-name">&amp;#xe8d0;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8d1;</span>
                    <div class="name">男</div>
                    <div class="code-name">&amp;#xe8d1;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8d2;</span>
                    <div class="name">女</div>
                    <div class="code-name">&amp;#xe8d2;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8d3;</span>
                    <div class="name">礼盒</div>
                    <div class="code-name">&amp;#xe8d3;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8d4;</span>
                    <div class="name">排行榜</div>
                    <div class="code-name">&amp;#xe8d4;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8d5;</span>
                    <div class="name">礼品卡</div>
                    <div class="code-name">&amp;#xe8d5;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8d6;</span>
                    <div class="name">朋友圈</div>
                    <div class="code-name">&amp;#xe8d6;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8d7;</span>
                    <div class="name">明星活动</div>
                    <div class="code-name">&amp;#xe8d7;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8d8;</span>
                    <div class="name">取票</div>
                    <div class="code-name">&amp;#xe8d8;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8d9;</span>
                    <div class="name">扫一扫</div>
                    <div class="code-name">&amp;#xe8d9;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8da;</span>
                    <div class="name">日历</div>
                    <div class="code-name">&amp;#xe8da;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8db;</span>
                    <div class="name">评论</div>
                    <div class="code-name">&amp;#xe8db;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8dc;</span>
                    <div class="name">轻会员</div>
                    <div class="code-name">&amp;#xe8dc;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8dd;</span>
                    <div class="name">日签</div>
                    <div class="code-name">&amp;#xe8dd;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8de;</span>
                    <div class="name">闪电</div>
                    <div class="code-name">&amp;#xe8de;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8df;</span>
                    <div class="name">筛选</div>
                    <div class="code-name">&amp;#xe8df;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8e0;</span>
                    <div class="name">商圈</div>
                    <div class="code-name">&amp;#xe8e0;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8e1;</span>
                    <div class="name">删除</div>
                    <div class="code-name">&amp;#xe8e1;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8e2;</span>
                    <div class="name">设置</div>
                    <div class="code-name">&amp;#xe8e2;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8e3;</span>
                    <div class="name">上传</div>
                    <div class="code-name">&amp;#xe8e3;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8e4;</span>
                    <div class="name">社区</div>
                    <div class="code-name">&amp;#xe8e4;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8e5;</span>
                    <div class="name">声音关闭</div>
                    <div class="code-name">&amp;#xe8e5;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8e6;</span>
                    <div class="name">失败</div>
                    <div class="code-name">&amp;#xe8e6;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8e7;</span>
                    <div class="name">时间</div>
                    <div class="code-name">&amp;#xe8e7;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8e8;</span>
                    <div class="name">声音</div>
                    <div class="code-name">&amp;#xe8e8;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8e9;</span>
                    <div class="name">收藏</div>
                    <div class="code-name">&amp;#xe8e9;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ea;</span>
                    <div class="name">手机</div>
                    <div class="code-name">&amp;#xe8ea;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8eb;</span>
                    <div class="name">首页</div>
                    <div class="code-name">&amp;#xe8eb;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ec;</span>
                    <div class="name">数据</div>
                    <div class="code-name">&amp;#xe8ec;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ed;</span>
                    <div class="name">刷新</div>
                    <div class="code-name">&amp;#xe8ed;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ee;</span>
                    <div class="name">搜索</div>
                    <div class="code-name">&amp;#xe8ee;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ef;</span>
                    <div class="name">叹号</div>
                    <div class="code-name">&amp;#xe8ef;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8f0;</span>
                    <div class="name">讨论区</div>
                    <div class="code-name">&amp;#xe8f0;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8f1;</span>
                    <div class="name">添加优惠券</div>
                    <div class="code-name">&amp;#xe8f1;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8f2;</span>
                    <div class="name">提示</div>
                    <div class="code-name">&amp;#xe8f2;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8f3;</span>
                    <div class="name">图片</div>
                    <div class="code-name">&amp;#xe8f3;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8f4;</span>
                    <div class="name">退票</div>
                    <div class="code-name">&amp;#xe8f4;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8f5;</span>
                    <div class="name">未选中</div>
                    <div class="code-name">&amp;#xe8f5;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8f6;</span>
                    <div class="name">微博</div>
                    <div class="code-name">&amp;#xe8f6;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8f7;</span>
                    <div class="name">问卷</div>
                    <div class="code-name">&amp;#xe8f7;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8f8;</span>
                    <div class="name">我的</div>
                    <div class="code-name">&amp;#xe8f8;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8f9;</span>
                    <div class="name">微信</div>
                    <div class="code-name">&amp;#xe8f9;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8fa;</span>
                    <div class="name">我的关注</div>
                    <div class="code-name">&amp;#xe8fa;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8fb;</span>
                    <div class="name">虾米</div>
                    <div class="code-name">&amp;#xe8fb;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8fc;</span>
                    <div class="name">想看</div>
                    <div class="code-name">&amp;#xe8fc;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8fd;</span>
                    <div class="name">相机</div>
                    <div class="code-name">&amp;#xe8fd;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8fe;</span>
                    <div class="name">消息</div>
                    <div class="code-name">&amp;#xe8fe;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe8ff;</span>
                    <div class="name">下载</div>
                    <div class="code-name">&amp;#xe8ff;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe900;</span>
                    <div class="name">小聚场</div>
                    <div class="code-name">&amp;#xe900;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe901;</span>
                    <div class="name">小食</div>
                    <div class="code-name">&amp;#xe901;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe902;</span>
                    <div class="name">消息中心</div>
                    <div class="code-name">&amp;#xe902;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe903;</span>
                    <div class="name">银行卡</div>
                    <div class="code-name">&amp;#xe903;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe904;</span>
                    <div class="name">眼睛</div>
                    <div class="code-name">&amp;#xe904;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe905;</span>
                    <div class="name">影城卡</div>
                    <div class="code-name">&amp;#xe905;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe906;</span>
                    <div class="name">已想看</div>
                    <div class="code-name">&amp;#xe906;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe907;</span>
                    <div class="name">影评模板</div>
                    <div class="code-name">&amp;#xe907;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe908;</span>
                    <div class="name">演出</div>
                    <div class="code-name">&amp;#xe908;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe909;</span>
                    <div class="name">小蜜</div>
                    <div class="code-name">&amp;#xe909;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe90a;</span>
                    <div class="name">影院</div>
                    <div class="code-name">&amp;#xe90a;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe90b;</span>
                    <div class="name">增加</div>
                    <div class="code-name">&amp;#xe90b;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe90c;</span>
                    <div class="name">语音</div>
                    <div class="code-name">&amp;#xe90c;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe90d;</span>
                    <div class="name">优惠券</div>
                    <div class="code-name">&amp;#xe90d;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe90e;</span>
                    <div class="name">WIFI</div>
                    <div class="code-name">&amp;#xe90e;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe90f;</span>
                    <div class="name">直播</div>
                    <div class="code-name">&amp;#xe90f;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe910;</span>
                    <div class="name">优酷会员</div>
                    <div class="code-name">&amp;#xe910;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe911;</span>
                    <div class="name">娱乐宝</div>
                    <div class="code-name">&amp;#xe911;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe912;</span>
                    <div class="name">指纹</div>
                    <div class="code-name">&amp;#xe912;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe913;</span>
                    <div class="name">爱心</div>
                    <div class="code-name">&amp;#xe913;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe914;</span>
                    <div class="name">成功</div>
                    <div class="code-name">&amp;#xe914;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe915;</span>
                    <div class="name">点赞</div>
                    <div class="code-name">&amp;#xe915;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe916;</span>
                    <div class="name">电话</div>
                    <div class="code-name">&amp;#xe916;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe917;</span>
                    <div class="name">帮助</div>
                    <div class="code-name">&amp;#xe917;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe918;</span>
                    <div class="name">电影票</div>
                    <div class="code-name">&amp;#xe918;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe919;</span>
                    <div class="name">发现</div>
                    <div class="code-name">&amp;#xe919;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe91a;</span>
                    <div class="name">定位</div>
                    <div class="code-name">&amp;#xe91a;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe91b;</span>
                    <div class="name">公告</div>
                    <div class="code-name">&amp;#xe91b;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe91c;</span>
                    <div class="name">话题</div>
                    <div class="code-name">&amp;#xe91c;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe91d;</span>
                    <div class="name">减少</div>
                    <div class="code-name">&amp;#xe91d;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe91e;</span>
                    <div class="name">会员</div>
                    <div class="code-name">&amp;#xe91e;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe91f;</span>
                    <div class="name">评论</div>
                    <div class="code-name">&amp;#xe91f;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe920;</span>
                    <div class="name">社区</div>
                    <div class="code-name">&amp;#xe920;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe921;</span>
                    <div class="name">失败</div>
                    <div class="code-name">&amp;#xe921;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe922;</span>
                    <div class="name">时间</div>
                    <div class="code-name">&amp;#xe922;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe923;</span>
                    <div class="name">闪电</div>
                    <div class="code-name">&amp;#xe923;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe924;</span>
                    <div class="name">我的</div>
                    <div class="code-name">&amp;#xe924;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe925;</span>
                    <div class="name">首页</div>
                    <div class="code-name">&amp;#xe925;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe926;</span>
                    <div class="name">手机</div>
                    <div class="code-name">&amp;#xe926;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe927;</span>
                    <div class="name">叹号</div>
                    <div class="code-name">&amp;#xe927;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe928;</span>
                    <div class="name">收藏</div>
                    <div class="code-name">&amp;#xe928;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe929;</span>
                    <div class="name">数据</div>
                    <div class="code-name">&amp;#xe929;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe92a;</span>
                    <div class="name">问答</div>
                    <div class="code-name">&amp;#xe92a;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe92b;</span>
                    <div class="name">眼睛</div>
                    <div class="code-name">&amp;#xe92b;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe92c;</span>
                    <div class="name">影城卡</div>
                    <div class="code-name">&amp;#xe92c;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe92d;</span>
                    <div class="name">相机</div>
                    <div class="code-name">&amp;#xe92d;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe92e;</span>
                    <div class="name">影院</div>
                    <div class="code-name">&amp;#xe92e;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe92f;</span>
                    <div class="name">银行优惠</div>
                    <div class="code-name">&amp;#xe92f;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe930;</span>
                    <div class="name">小食</div>
                    <div class="code-name">&amp;#xe930;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe931;</span>
                    <div class="name">演出</div>
                    <div class="code-name">&amp;#xe931;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe932;</span>
                    <div class="name">增加</div>
                    <div class="code-name">&amp;#xe932;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe933;</span>
                    <div class="name">电影</div>
                    <div class="code-name">&amp;#xe933;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe934;</span>
                    <div class="name">优惠券</div>
                    <div class="code-name">&amp;#xe934;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe935;</span>
                    <div class="name">热门</div>
                    <div class="code-name">&amp;#xe935;</div>
                </li>

                <li class="dib">
                    <span class="icon iconfont">&#xe936;</span>
                    <div class="name">创作</div>
                    <div class="code-name">&amp;#xe936;</div>
                </li>

            </ul>
            <div class="article markdown">
                <h2 id="unicode-">Unicode 引用</h2>
                <hr>

                <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
                <ul>
                    <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
                    <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
                    <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
                </ul>
                <blockquote>
                    <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
                </blockquote>
                <p>Unicode 使用步骤如下：</p>
                <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
                <pre><code class="language-css"
                >@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
                <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
                <pre><code class="language-css"
                >.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
                <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
                <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
                <blockquote>
                    <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                </blockquote>
            </div>
        </div>
        <div class="content font-class">
            <ul class="icon_lists dib-box">

                <li class="dib">
                    <span class="icon iconfont icon-aixin"></span>
                    <div class="name">
                        爱心
                    </div>
                    <div class="code-name">.icon-aixin
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-bianji"></span>
                    <div class="name">
                        编辑
                    </div>
                    <div class="code-name">.icon-bianji
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-Dyanjing"></span>
                    <div class="name">
                        3D眼镜
                    </div>
                    <div class="code-name">.icon-Dyanjing
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-caidan"></span>
                    <div class="name">
                        彩蛋
                    </div>
                    <div class="code-name">.icon-caidan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-anquan"></span>
                    <div class="name">
                        安全
                    </div>
                    <div class="code-name">.icon-anquan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-bangzhu"></span>
                    <div class="name">
                        帮助
                    </div>
                    <div class="code-name">.icon-bangzhu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-buganxingqu"></span>
                    <div class="name">
                        不感兴趣
                    </div>
                    <div class="code-name">.icon-buganxingqu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-bofangjilu"></span>
                    <div class="name">
                        播放记录
                    </div>
                    <div class="code-name">.icon-bofangjilu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-chuangzuo"></span>
                    <div class="name">
                        创作
                    </div>
                    <div class="code-name">.icon-chuangzuo
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-chenggong"></span>
                    <div class="name">
                        成功
                    </div>
                    <div class="code-name">.icon-chenggong
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-ceshi"></span>
                    <div class="name">
                        测试
                    </div>
                    <div class="code-name">.icon-ceshi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-dianhua"></span>
                    <div class="name">
                        电话
                    </div>
                    <div class="code-name">.icon-dianhua
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-dianzan"></span>
                    <div class="name">
                        点赞
                    </div>
                    <div class="code-name">.icon-dianzan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-dingwei"></span>
                    <div class="name">
                        定位
                    </div>
                    <div class="code-name">.icon-dingwei
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-diantong_guan"></span>
                    <div class="name">
                        电筒_关
                    </div>
                    <div class="code-name">.icon-diantong_guan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-dianying"></span>
                    <div class="name">
                        电影
                    </div>
                    <div class="code-name">.icon-dianying
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-ditu"></span>
                    <div class="name">
                        地图
                    </div>
                    <div class="code-name">.icon-ditu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-diantong_kai"></span>
                    <div class="name">
                        电筒_开
                    </div>
                    <div class="code-name">.icon-diantong_kai
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-dianyingpiao"></span>
                    <div class="name">
                        电影票
                    </div>
                    <div class="code-name">.icon-dianyingpiao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-dingdan"></span>
                    <div class="name">
                        订单
                    </div>
                    <div class="code-name">.icon-dingdan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-gengduo"></span>
                    <div class="name">
                        更多
                    </div>
                    <div class="code-name">.icon-gengduo
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-fanbei"></span>
                    <div class="name">
                        翻倍
                    </div>
                    <div class="code-name">.icon-fanbei
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-faxian"></span>
                    <div class="name">
                        发现
                    </div>
                    <div class="code-name">.icon-faxian
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-ertongpiao"></span>
                    <div class="name">
                        儿童票
                    </div>
                    <div class="code-name">.icon-ertongpiao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-gongyi"></span>
                    <div class="name">
                        公益
                    </div>
                    <div class="code-name">.icon-gongyi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-hongbao"></span>
                    <div class="name">
                        红包
                    </div>
                    <div class="code-name">.icon-hongbao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-fuzhi"></span>
                    <div class="name">
                        复制
                    </div>
                    <div class="code-name">.icon-fuzhi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-fenxiang"></span>
                    <div class="name">
                        分享
                    </div>
                    <div class="code-name">.icon-fenxiang
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-huatifuhao"></span>
                    <div class="name">
                        话题符号
                    </div>
                    <div class="code-name">.icon-huatifuhao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-huiyuan"></span>
                    <div class="name">
                        会员
                    </div>
                    <div class="code-name">.icon-huiyuan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-aliyu"></span>
                    <div class="name">
                        阿里鱼
                    </div>
                    <div class="code-name">.icon-aliyu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-jiju"></span>
                    <div class="name">
                        机具
                    </div>
                    <div class="code-name">.icon-jiju
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-jianshao"></span>
                    <div class="name">
                        减少
                    </div>
                    <div class="code-name">.icon-jianshao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-kabao"></span>
                    <div class="name">
                        卡包
                    </div>
                    <div class="code-name">.icon-kabao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-huati"></span>
                    <div class="name">
                        话题
                    </div>
                    <div class="code-name">.icon-huati
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-guanzhu"></span>
                    <div class="name">
                        关注
                    </div>
                    <div class="code-name">.icon-guanzhu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-maiyizengyi"></span>
                    <div class="name">
                        买一赠一
                    </div>
                    <div class="code-name">.icon-maiyizengyi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-mima"></span>
                    <div class="name">
                        密码
                    </div>
                    <div class="code-name">.icon-mima
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-nan"></span>
                    <div class="name">
                        男
                    </div>
                    <div class="code-name">.icon-nan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-nv"></span>
                    <div class="name">
                        女
                    </div>
                    <div class="code-name">.icon-nv
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-lihe"></span>
                    <div class="name">
                        礼盒
                    </div>
                    <div class="code-name">.icon-lihe
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-paihangbang"></span>
                    <div class="name">
                        排行榜
                    </div>
                    <div class="code-name">.icon-paihangbang
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-lipinka"></span>
                    <div class="name">
                        礼品卡
                    </div>
                    <div class="code-name">.icon-lipinka
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-pengyouquan"></span>
                    <div class="name">
                        朋友圈
                    </div>
                    <div class="code-name">.icon-pengyouquan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-mingxinghuodong"></span>
                    <div class="name">
                        明星活动
                    </div>
                    <div class="code-name">.icon-mingxinghuodong
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-qupiao"></span>
                    <div class="name">
                        取票
                    </div>
                    <div class="code-name">.icon-qupiao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-saoyisao"></span>
                    <div class="name">
                        扫一扫
                    </div>
                    <div class="code-name">.icon-saoyisao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-rili"></span>
                    <div class="name">
                        日历
                    </div>
                    <div class="code-name">.icon-rili
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-pinglun"></span>
                    <div class="name">
                        评论
                    </div>
                    <div class="code-name">.icon-pinglun
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-qinghuiyuan"></span>
                    <div class="name">
                        轻会员
                    </div>
                    <div class="code-name">.icon-qinghuiyuan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-riqian"></span>
                    <div class="name">
                        日签
                    </div>
                    <div class="code-name">.icon-riqian
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shandian"></span>
                    <div class="name">
                        闪电
                    </div>
                    <div class="code-name">.icon-shandian
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shaixuan"></span>
                    <div class="name">
                        筛选
                    </div>
                    <div class="code-name">.icon-shaixuan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shangquan"></span>
                    <div class="name">
                        商圈
                    </div>
                    <div class="code-name">.icon-shangquan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shanchu"></span>
                    <div class="name">
                        删除
                    </div>
                    <div class="code-name">.icon-shanchu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shezhi"></span>
                    <div class="name">
                        设置
                    </div>
                    <div class="code-name">.icon-shezhi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shangchuan"></span>
                    <div class="name">
                        上传
                    </div>
                    <div class="code-name">.icon-shangchuan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shequ"></span>
                    <div class="name">
                        社区
                    </div>
                    <div class="code-name">.icon-shequ
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shengyinguanbi"></span>
                    <div class="name">
                        声音关闭
                    </div>
                    <div class="code-name">.icon-shengyinguanbi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shibai"></span>
                    <div class="name">
                        失败
                    </div>
                    <div class="code-name">.icon-shibai
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shijian"></span>
                    <div class="name">
                        时间
                    </div>
                    <div class="code-name">.icon-shijian
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shengyin"></span>
                    <div class="name">
                        声音
                    </div>
                    <div class="code-name">.icon-shengyin
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shoucang"></span>
                    <div class="name">
                        收藏
                    </div>
                    <div class="code-name">.icon-shoucang
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shouji"></span>
                    <div class="name">
                        手机
                    </div>
                    <div class="code-name">.icon-shouji
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shouye"></span>
                    <div class="name">
                        首页
                    </div>
                    <div class="code-name">.icon-shouye
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shuju"></span>
                    <div class="name">
                        数据
                    </div>
                    <div class="code-name">.icon-shuju
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shuaxin"></span>
                    <div class="name">
                        刷新
                    </div>
                    <div class="code-name">.icon-shuaxin
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-sousuo"></span>
                    <div class="name">
                        搜索
                    </div>
                    <div class="code-name">.icon-sousuo
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-tanhao"></span>
                    <div class="name">
                        叹号
                    </div>
                    <div class="code-name">.icon-tanhao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-taolunqu"></span>
                    <div class="name">
                        讨论区
                    </div>
                    <div class="code-name">.icon-taolunqu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-tianjiayouhuiquan"></span>
                    <div class="name">
                        添加优惠券
                    </div>
                    <div class="code-name">.icon-tianjiayouhuiquan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-tishi"></span>
                    <div class="name">
                        提示
                    </div>
                    <div class="code-name">.icon-tishi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-tupian"></span>
                    <div class="name">
                        图片
                    </div>
                    <div class="code-name">.icon-tupian
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-tuipiao"></span>
                    <div class="name">
                        退票
                    </div>
                    <div class="code-name">.icon-tuipiao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-weixuanzhong"></span>
                    <div class="name">
                        未选中
                    </div>
                    <div class="code-name">.icon-weixuanzhong
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-weibo"></span>
                    <div class="name">
                        微博
                    </div>
                    <div class="code-name">.icon-weibo
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-wenjuan"></span>
                    <div class="name">
                        问卷
                    </div>
                    <div class="code-name">.icon-wenjuan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-wode"></span>
                    <div class="name">
                        我的
                    </div>
                    <div class="code-name">.icon-wode
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-weixin"></span>
                    <div class="name">
                        微信
                    </div>
                    <div class="code-name">.icon-weixin
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-wodeguanzhu"></span>
                    <div class="name">
                        我的关注
                    </div>
                    <div class="code-name">.icon-wodeguanzhu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiami"></span>
                    <div class="name">
                        虾米
                    </div>
                    <div class="code-name">.icon-xiami
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiangkan"></span>
                    <div class="name">
                        想看
                    </div>
                    <div class="code-name">.icon-xiangkan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiangji"></span>
                    <div class="name">
                        相机
                    </div>
                    <div class="code-name">.icon-xiangji
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiaoxi"></span>
                    <div class="name">
                        消息
                    </div>
                    <div class="code-name">.icon-xiaoxi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiazai"></span>
                    <div class="name">
                        下载
                    </div>
                    <div class="code-name">.icon-xiazai
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiaojuchang"></span>
                    <div class="name">
                        小聚场
                    </div>
                    <div class="code-name">.icon-xiaojuchang
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiaoshi"></span>
                    <div class="name">
                        小食
                    </div>
                    <div class="code-name">.icon-xiaoshi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiaoxizhongxin"></span>
                    <div class="name">
                        消息中心
                    </div>
                    <div class="code-name">.icon-xiaoxizhongxin
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yinhangka"></span>
                    <div class="name">
                        银行卡
                    </div>
                    <div class="code-name">.icon-yinhangka
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yanjing"></span>
                    <div class="name">
                        眼睛
                    </div>
                    <div class="code-name">.icon-yanjing
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yingchengka"></span>
                    <div class="name">
                        影城卡
                    </div>
                    <div class="code-name">.icon-yingchengka
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yixiangkan"></span>
                    <div class="name">
                        已想看
                    </div>
                    <div class="code-name">.icon-yixiangkan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yingpingmoban"></span>
                    <div class="name">
                        影评模板
                    </div>
                    <div class="code-name">.icon-yingpingmoban
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yanchu"></span>
                    <div class="name">
                        演出
                    </div>
                    <div class="code-name">.icon-yanchu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiaomi"></span>
                    <div class="name">
                        小蜜
                    </div>
                    <div class="code-name">.icon-xiaomi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yingyuan"></span>
                    <div class="name">
                        影院
                    </div>
                    <div class="code-name">.icon-yingyuan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-zengjia"></span>
                    <div class="name">
                        增加
                    </div>
                    <div class="code-name">.icon-zengjia
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yuyin"></span>
                    <div class="name">
                        语音
                    </div>
                    <div class="code-name">.icon-yuyin
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-youhuiquan"></span>
                    <div class="name">
                        优惠券
                    </div>
                    <div class="code-name">.icon-youhuiquan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-WIFI"></span>
                    <div class="name">
                        WIFI
                    </div>
                    <div class="code-name">.icon-WIFI
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-zhibo"></span>
                    <div class="name">
                        直播
                    </div>
                    <div class="code-name">.icon-zhibo
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-youkuhuiyuan"></span>
                    <div class="name">
                        优酷会员
                    </div>
                    <div class="code-name">.icon-youkuhuiyuan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yulebao"></span>
                    <div class="name">
                        娱乐宝
                    </div>
                    <div class="code-name">.icon-yulebao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-zhiwen"></span>
                    <div class="name">
                        指纹
                    </div>
                    <div class="code-name">.icon-zhiwen
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-aixin1"></span>
                    <div class="name">
                        爱心
                    </div>
                    <div class="code-name">.icon-aixin1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-chenggong1"></span>
                    <div class="name">
                        成功
                    </div>
                    <div class="code-name">.icon-chenggong1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-dianzan1"></span>
                    <div class="name">
                        点赞
                    </div>
                    <div class="code-name">.icon-dianzan1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-dianhua1"></span>
                    <div class="name">
                        电话
                    </div>
                    <div class="code-name">.icon-dianhua1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-bangzhu1"></span>
                    <div class="name">
                        帮助
                    </div>
                    <div class="code-name">.icon-bangzhu1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-dianyingpiao1"></span>
                    <div class="name">
                        电影票
                    </div>
                    <div class="code-name">.icon-dianyingpiao1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-faxian1"></span>
                    <div class="name">
                        发现
                    </div>
                    <div class="code-name">.icon-faxian1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-dingwei1"></span>
                    <div class="name">
                        定位
                    </div>
                    <div class="code-name">.icon-dingwei1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-gonggao"></span>
                    <div class="name">
                        公告
                    </div>
                    <div class="code-name">.icon-gonggao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-huati1"></span>
                    <div class="name">
                        话题
                    </div>
                    <div class="code-name">.icon-huati1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-jianshao1"></span>
                    <div class="name">
                        减少
                    </div>
                    <div class="code-name">.icon-jianshao1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-huiyuan1"></span>
                    <div class="name">
                        会员
                    </div>
                    <div class="code-name">.icon-huiyuan1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-pinglun1"></span>
                    <div class="name">
                        评论
                    </div>
                    <div class="code-name">.icon-pinglun1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shequ1"></span>
                    <div class="name">
                        社区
                    </div>
                    <div class="code-name">.icon-shequ1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shibai1"></span>
                    <div class="name">
                        失败
                    </div>
                    <div class="code-name">.icon-shibai1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shijian1"></span>
                    <div class="name">
                        时间
                    </div>
                    <div class="code-name">.icon-shijian1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shandian1"></span>
                    <div class="name">
                        闪电
                    </div>
                    <div class="code-name">.icon-shandian1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-wode1"></span>
                    <div class="name">
                        我的
                    </div>
                    <div class="code-name">.icon-wode1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shouye1"></span>
                    <div class="name">
                        首页
                    </div>
                    <div class="code-name">.icon-shouye1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shouji1"></span>
                    <div class="name">
                        手机
                    </div>
                    <div class="code-name">.icon-shouji1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-tanhao1"></span>
                    <div class="name">
                        叹号
                    </div>
                    <div class="code-name">.icon-tanhao1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shoucang1"></span>
                    <div class="name">
                        收藏
                    </div>
                    <div class="code-name">.icon-shoucang1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shuju1"></span>
                    <div class="name">
                        数据
                    </div>
                    <div class="code-name">.icon-shuju1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-wenda"></span>
                    <div class="name">
                        问答
                    </div>
                    <div class="code-name">.icon-wenda
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yanjing1"></span>
                    <div class="name">
                        眼睛
                    </div>
                    <div class="code-name">.icon-yanjing1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yingchengka1"></span>
                    <div class="name">
                        影城卡
                    </div>
                    <div class="code-name">.icon-yingchengka1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiangji1"></span>
                    <div class="name">
                        相机
                    </div>
                    <div class="code-name">.icon-xiangji1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yingyuan1"></span>
                    <div class="name">
                        影院
                    </div>
                    <div class="code-name">.icon-yingyuan1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yinhangyouhui"></span>
                    <div class="name">
                        银行优惠
                    </div>
                    <div class="code-name">.icon-yinhangyouhui
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiaoshi1"></span>
                    <div class="name">
                        小食
                    </div>
                    <div class="code-name">.icon-xiaoshi1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yanchu1"></span>
                    <div class="name">
                        演出
                    </div>
                    <div class="code-name">.icon-yanchu1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-zengjia1"></span>
                    <div class="name">
                        增加
                    </div>
                    <div class="code-name">.icon-zengjia1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-dianying1"></span>
                    <div class="name">
                        电影
                    </div>
                    <div class="code-name">.icon-dianying1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-youhuiquan1"></span>
                    <div class="name">
                        优惠券
                    </div>
                    <div class="code-name">.icon-youhuiquan1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-remen"></span>
                    <div class="name">
                        热门
                    </div>
                    <div class="code-name">.icon-remen
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-chuangzuo1"></span>
                    <div class="name">
                        创作
                    </div>
                    <div class="code-name">.icon-chuangzuo1
                    </div>
                </li>

            </ul>
            <div class="article markdown">
                <h2 id="font-class-">font-class 引用</h2>
                <hr>

                <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
                <p>与 Unicode 使用方式相比，具有如下特点：</p>
                <ul>
                    <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
                    <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
                    <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
                    <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
                </ul>
                <p>使用步骤如下：</p>
                <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
                <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
                <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
                <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
                <blockquote>
                    <p>"
                        iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                </blockquote>
            </div>
        </div>
        <div class="content symbol">
            <ul class="icon_lists dib-box">

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-aixin"></use>
                    </svg>
                    <div class="name">爱心</div>
                    <div class="code-name">#icon-aixin</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="code-name">#icon-bianji</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-Dyanjing"></use>
                    </svg>
                    <div class="name">3D眼镜</div>
                    <div class="code-name">#icon-Dyanjing</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-caidan"></use>
                    </svg>
                    <div class="name">彩蛋</div>
                    <div class="code-name">#icon-caidan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-anquan"></use>
                    </svg>
                    <div class="name">安全</div>
                    <div class="code-name">#icon-anquan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-bangzhu"></use>
                    </svg>
                    <div class="name">帮助</div>
                    <div class="code-name">#icon-bangzhu</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-buganxingqu"></use>
                    </svg>
                    <div class="name">不感兴趣</div>
                    <div class="code-name">#icon-buganxingqu</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-bofangjilu"></use>
                    </svg>
                    <div class="name">播放记录</div>
                    <div class="code-name">#icon-bofangjilu</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-chuangzuo"></use>
                    </svg>
                    <div class="name">创作</div>
                    <div class="code-name">#icon-chuangzuo</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-chenggong"></use>
                    </svg>
                    <div class="name">成功</div>
                    <div class="code-name">#icon-chenggong</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-ceshi"></use>
                    </svg>
                    <div class="name">测试</div>
                    <div class="code-name">#icon-ceshi</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="code-name">#icon-dianhua</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="code-name">#icon-dianzan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-dingwei"></use>
                    </svg>
                    <div class="name">定位</div>
                    <div class="code-name">#icon-dingwei</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-diantong_guan"></use>
                    </svg>
                    <div class="name">电筒_关</div>
                    <div class="code-name">#icon-diantong_guan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-dianying"></use>
                    </svg>
                    <div class="name">电影</div>
                    <div class="code-name">#icon-dianying</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-ditu"></use>
                    </svg>
                    <div class="name">地图</div>
                    <div class="code-name">#icon-ditu</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-diantong_kai"></use>
                    </svg>
                    <div class="name">电筒_开</div>
                    <div class="code-name">#icon-diantong_kai</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-dianyingpiao"></use>
                    </svg>
                    <div class="name">电影票</div>
                    <div class="code-name">#icon-dianyingpiao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdan"></use>
                    </svg>
                    <div class="name">订单</div>
                    <div class="code-name">#icon-dingdan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="code-name">#icon-gengduo</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-fanbei"></use>
                    </svg>
                    <div class="name">翻倍</div>
                    <div class="code-name">#icon-fanbei</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-faxian"></use>
                    </svg>
                    <div class="name">发现</div>
                    <div class="code-name">#icon-faxian</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-ertongpiao"></use>
                    </svg>
                    <div class="name">儿童票</div>
                    <div class="code-name">#icon-ertongpiao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-gongyi"></use>
                    </svg>
                    <div class="name">公益</div>
                    <div class="code-name">#icon-gongyi</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-hongbao"></use>
                    </svg>
                    <div class="name">红包</div>
                    <div class="code-name">#icon-hongbao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhi"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="code-name">#icon-fuzhi</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="code-name">#icon-fenxiang</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-huatifuhao"></use>
                    </svg>
                    <div class="name">话题符号</div>
                    <div class="code-name">#icon-huatifuhao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="code-name">#icon-huiyuan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-aliyu"></use>
                    </svg>
                    <div class="name">阿里鱼</div>
                    <div class="code-name">#icon-aliyu</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-jiju"></use>
                    </svg>
                    <div class="name">机具</div>
                    <div class="code-name">#icon-jiju</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-jianshao"></use>
                    </svg>
                    <div class="name">减少</div>
                    <div class="code-name">#icon-jianshao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-kabao"></use>
                    </svg>
                    <div class="name">卡包</div>
                    <div class="code-name">#icon-kabao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-huati"></use>
                    </svg>
                    <div class="name">话题</div>
                    <div class="code-name">#icon-huati</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-guanzhu"></use>
                    </svg>
                    <div class="name">关注</div>
                    <div class="code-name">#icon-guanzhu</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-maiyizengyi"></use>
                    </svg>
                    <div class="name">买一赠一</div>
                    <div class="code-name">#icon-maiyizengyi</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-mima"></use>
                    </svg>
                    <div class="name">密码</div>
                    <div class="code-name">#icon-mima</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-nan"></use>
                    </svg>
                    <div class="name">男</div>
                    <div class="code-name">#icon-nan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-nv"></use>
                    </svg>
                    <div class="name">女</div>
                    <div class="code-name">#icon-nv</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-lihe"></use>
                    </svg>
                    <div class="name">礼盒</div>
                    <div class="code-name">#icon-lihe</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-paihangbang"></use>
                    </svg>
                    <div class="name">排行榜</div>
                    <div class="code-name">#icon-paihangbang</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-lipinka"></use>
                    </svg>
                    <div class="name">礼品卡</div>
                    <div class="code-name">#icon-lipinka</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-pengyouquan"></use>
                    </svg>
                    <div class="name">朋友圈</div>
                    <div class="code-name">#icon-pengyouquan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-mingxinghuodong"></use>
                    </svg>
                    <div class="name">明星活动</div>
                    <div class="code-name">#icon-mingxinghuodong</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-qupiao"></use>
                    </svg>
                    <div class="name">取票</div>
                    <div class="code-name">#icon-qupiao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-saoyisao"></use>
                    </svg>
                    <div class="name">扫一扫</div>
                    <div class="code-name">#icon-saoyisao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-rili"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="code-name">#icon-rili</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-pinglun"></use>
                    </svg>
                    <div class="name">评论</div>
                    <div class="code-name">#icon-pinglun</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-qinghuiyuan"></use>
                    </svg>
                    <div class="name">轻会员</div>
                    <div class="code-name">#icon-qinghuiyuan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-riqian"></use>
                    </svg>
                    <div class="name">日签</div>
                    <div class="code-name">#icon-riqian</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shandian"></use>
                    </svg>
                    <div class="name">闪电</div>
                    <div class="code-name">#icon-shandian</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shaixuan"></use>
                    </svg>
                    <div class="name">筛选</div>
                    <div class="code-name">#icon-shaixuan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shangquan"></use>
                    </svg>
                    <div class="name">商圈</div>
                    <div class="code-name">#icon-shangquan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="code-name">#icon-shanchu</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="code-name">#icon-shezhi</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="code-name">#icon-shangchuan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shequ"></use>
                    </svg>
                    <div class="name">社区</div>
                    <div class="code-name">#icon-shequ</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shengyinguanbi"></use>
                    </svg>
                    <div class="name">声音关闭</div>
                    <div class="code-name">#icon-shengyinguanbi</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shibai"></use>
                    </svg>
                    <div class="name">失败</div>
                    <div class="code-name">#icon-shibai</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shijian"></use>
                    </svg>
                    <div class="name">时间</div>
                    <div class="code-name">#icon-shijian</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shengyin"></use>
                    </svg>
                    <div class="name">声音</div>
                    <div class="code-name">#icon-shengyin</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shoucang"></use>
                    </svg>
                    <div class="name">收藏</div>
                    <div class="code-name">#icon-shoucang</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="code-name">#icon-shouji</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="code-name">#icon-shouye</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shuju"></use>
                    </svg>
                    <div class="name">数据</div>
                    <div class="code-name">#icon-shuju</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="code-name">#icon-shuaxin</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="code-name">#icon-sousuo</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-tanhao"></use>
                    </svg>
                    <div class="name">叹号</div>
                    <div class="code-name">#icon-tanhao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-taolunqu"></use>
                    </svg>
                    <div class="name">讨论区</div>
                    <div class="code-name">#icon-taolunqu</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiayouhuiquan"></use>
                    </svg>
                    <div class="name">添加优惠券</div>
                    <div class="code-name">#icon-tianjiayouhuiquan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-tishi"></use>
                    </svg>
                    <div class="name">提示</div>
                    <div class="code-name">#icon-tishi</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-tupian"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="code-name">#icon-tupian</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-tuipiao"></use>
                    </svg>
                    <div class="name">退票</div>
                    <div class="code-name">#icon-tuipiao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-weixuanzhong"></use>
                    </svg>
                    <div class="name">未选中</div>
                    <div class="code-name">#icon-weixuanzhong</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                    <div class="name">微博</div>
                    <div class="code-name">#icon-weibo</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-wenjuan"></use>
                    </svg>
                    <div class="name">问卷</div>
                    <div class="code-name">#icon-wenjuan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-wode"></use>
                    </svg>
                    <div class="name">我的</div>
                    <div class="code-name">#icon-wode</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="code-name">#icon-weixin</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-wodeguanzhu"></use>
                    </svg>
                    <div class="name">我的关注</div>
                    <div class="code-name">#icon-wodeguanzhu</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiami"></use>
                    </svg>
                    <div class="name">虾米</div>
                    <div class="code-name">#icon-xiami</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangkan"></use>
                    </svg>
                    <div class="name">想看</div>
                    <div class="code-name">#icon-xiangkan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangji"></use>
                    </svg>
                    <div class="name">相机</div>
                    <div class="code-name">#icon-xiangji</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="code-name">#icon-xiaoxi</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiazai"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="code-name">#icon-xiazai</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaojuchang"></use>
                    </svg>
                    <div class="name">小聚场</div>
                    <div class="code-name">#icon-xiaojuchang</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoshi"></use>
                    </svg>
                    <div class="name">小食</div>
                    <div class="code-name">#icon-xiaoshi</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxizhongxin"></use>
                    </svg>
                    <div class="name">消息中心</div>
                    <div class="code-name">#icon-xiaoxizhongxin</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yinhangka"></use>
                    </svg>
                    <div class="name">银行卡</div>
                    <div class="code-name">#icon-yinhangka</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yanjing"></use>
                    </svg>
                    <div class="name">眼睛</div>
                    <div class="code-name">#icon-yanjing</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yingchengka"></use>
                    </svg>
                    <div class="name">影城卡</div>
                    <div class="code-name">#icon-yingchengka</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yixiangkan"></use>
                    </svg>
                    <div class="name">已想看</div>
                    <div class="code-name">#icon-yixiangkan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yingpingmoban"></use>
                    </svg>
                    <div class="name">影评模板</div>
                    <div class="code-name">#icon-yingpingmoban</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yanchu"></use>
                    </svg>
                    <div class="name">演出</div>
                    <div class="code-name">#icon-yanchu</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaomi"></use>
                    </svg>
                    <div class="name">小蜜</div>
                    <div class="code-name">#icon-xiaomi</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yingyuan"></use>
                    </svg>
                    <div class="name">影院</div>
                    <div class="code-name">#icon-yingyuan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-zengjia"></use>
                    </svg>
                    <div class="name">增加</div>
                    <div class="code-name">#icon-zengjia</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yuyin"></use>
                    </svg>
                    <div class="name">语音</div>
                    <div class="code-name">#icon-yuyin</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-youhuiquan"></use>
                    </svg>
                    <div class="name">优惠券</div>
                    <div class="code-name">#icon-youhuiquan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-WIFI"></use>
                    </svg>
                    <div class="name">WIFI</div>
                    <div class="code-name">#icon-WIFI</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-zhibo"></use>
                    </svg>
                    <div class="name">直播</div>
                    <div class="code-name">#icon-zhibo</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-youkuhuiyuan"></use>
                    </svg>
                    <div class="name">优酷会员</div>
                    <div class="code-name">#icon-youkuhuiyuan</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yulebao"></use>
                    </svg>
                    <div class="name">娱乐宝</div>
                    <div class="code-name">#icon-yulebao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-zhiwen"></use>
                    </svg>
                    <div class="name">指纹</div>
                    <div class="code-name">#icon-zhiwen</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-aixin1"></use>
                    </svg>
                    <div class="name">爱心</div>
                    <div class="code-name">#icon-aixin1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-chenggong1"></use>
                    </svg>
                    <div class="name">成功</div>
                    <div class="code-name">#icon-chenggong1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan1"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="code-name">#icon-dianzan1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua1"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="code-name">#icon-dianhua1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-bangzhu1"></use>
                    </svg>
                    <div class="name">帮助</div>
                    <div class="code-name">#icon-bangzhu1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-dianyingpiao1"></use>
                    </svg>
                    <div class="name">电影票</div>
                    <div class="code-name">#icon-dianyingpiao1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-faxian1"></use>
                    </svg>
                    <div class="name">发现</div>
                    <div class="code-name">#icon-faxian1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-dingwei1"></use>
                    </svg>
                    <div class="name">定位</div>
                    <div class="code-name">#icon-dingwei1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-gonggao"></use>
                    </svg>
                    <div class="name">公告</div>
                    <div class="code-name">#icon-gonggao</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-huati1"></use>
                    </svg>
                    <div class="name">话题</div>
                    <div class="code-name">#icon-huati1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-jianshao1"></use>
                    </svg>
                    <div class="name">减少</div>
                    <div class="code-name">#icon-jianshao1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan1"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="code-name">#icon-huiyuan1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-pinglun1"></use>
                    </svg>
                    <div class="name">评论</div>
                    <div class="code-name">#icon-pinglun1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shequ1"></use>
                    </svg>
                    <div class="name">社区</div>
                    <div class="code-name">#icon-shequ1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shibai1"></use>
                    </svg>
                    <div class="name">失败</div>
                    <div class="code-name">#icon-shibai1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shijian1"></use>
                    </svg>
                    <div class="name">时间</div>
                    <div class="code-name">#icon-shijian1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shandian1"></use>
                    </svg>
                    <div class="name">闪电</div>
                    <div class="code-name">#icon-shandian1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-wode1"></use>
                    </svg>
                    <div class="name">我的</div>
                    <div class="code-name">#icon-wode1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye1"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="code-name">#icon-shouye1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji1"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="code-name">#icon-shouji1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-tanhao1"></use>
                    </svg>
                    <div class="name">叹号</div>
                    <div class="code-name">#icon-tanhao1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shoucang1"></use>
                    </svg>
                    <div class="name">收藏</div>
                    <div class="code-name">#icon-shoucang1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shuju1"></use>
                    </svg>
                    <div class="name">数据</div>
                    <div class="code-name">#icon-shuju1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-wenda"></use>
                    </svg>
                    <div class="name">问答</div>
                    <div class="code-name">#icon-wenda</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yanjing1"></use>
                    </svg>
                    <div class="name">眼睛</div>
                    <div class="code-name">#icon-yanjing1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yingchengka1"></use>
                    </svg>
                    <div class="name">影城卡</div>
                    <div class="code-name">#icon-yingchengka1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangji1"></use>
                    </svg>
                    <div class="name">相机</div>
                    <div class="code-name">#icon-xiangji1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yingyuan1"></use>
                    </svg>
                    <div class="name">影院</div>
                    <div class="code-name">#icon-yingyuan1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yinhangyouhui"></use>
                    </svg>
                    <div class="name">银行优惠</div>
                    <div class="code-name">#icon-yinhangyouhui</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoshi1"></use>
                    </svg>
                    <div class="name">小食</div>
                    <div class="code-name">#icon-xiaoshi1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-yanchu1"></use>
                    </svg>
                    <div class="name">演出</div>
                    <div class="code-name">#icon-yanchu1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-zengjia1"></use>
                    </svg>
                    <div class="name">增加</div>
                    <div class="code-name">#icon-zengjia1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-dianying1"></use>
                    </svg>
                    <div class="name">电影</div>
                    <div class="code-name">#icon-dianying1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-youhuiquan1"></use>
                    </svg>
                    <div class="name">优惠券</div>
                    <div class="code-name">#icon-youhuiquan1</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-remen"></use>
                    </svg>
                    <div class="name">热门</div>
                    <div class="code-name">#icon-remen</div>
                </li>

                <li class="dib">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-chuangzuo1"></use>
                    </svg>
                    <div class="name">创作</div>
                    <div class="code-name">#icon-chuangzuo1</div>
                </li>

            </ul>
            <div class="article markdown">
                <h2 id="symbol-">Symbol 引用</h2>
                <hr>

                <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
                    这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
                <ul>
                    <li>支持多色图标了，不再受单色限制。</li>
                    <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
                    <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
                    <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
                </ul>
                <p>使用步骤如下：</p>
                <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
                <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
                <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
                <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
                <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
                <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
            </div>
        </div>

    </div>
</div>
<script>
    $(document).ready(function () {
        $('.tab-container .content:first').show()

        $('#tabs li').click(function (e) {
            var tabContent = $('.tab-container .content')
            var index = $(this).index()

            if ($(this).hasClass('active')) {
                return
            } else {
                $('#tabs li').removeClass('active')
                $(this).addClass('active')

                tabContent.hide().eq(index).fadeIn()
            }
        })
    })
</script>
</body>
</html>
